<template>
  <div class="appoInfo-container" @click.stop="()=>{}">
    <Dialogdrawerdefect
      :ddtvisible.sync="appoInfoEditVisible"
      size="650px"
      :modal="true"
    >
      <div class="appoInfo-wrap" v-loading="loading">
        <div class="aiw-grid">
          <div class="aig-title">
            <div class="tit">基础设置</div>
            <div class="navs">
              <div class="btn" v-show="appoInfo.appointmentStatus==='正常预约'" @click="appoDetail">预约详情</div>
              <!-- <div class="btn" @click="appoDetailSeat">预约占位</div> -->
              <el-dropdown @command="statusCommand">
                <span class="btntxt">
                  预约状态<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="item in statusOptions"
                    :key="item"
                    :command="item"
                    :disabled="item === appoInfo.appointmentStatus">{{item}}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <div class="aiw-main">
            <el-table
              :data="tableData"
              border
              size="mini"
              :header-cell-style="{backgroundColor: '#EEF5FE'}"
              style="width: 100%;">
              <el-table-column prop="appointmentDate" label="日期" align="center"></el-table-column>
              <el-table-column prop="checkClass" label="班次" align="center"></el-table-column>
              <el-table-column prop="beginTime" label="开始时间" align="center"></el-table-column>
              <el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
              <el-table-column prop="color" label="颜色" align="center">
                <template slot-scope="scope">
                  <div>{{scope.row.color?scope.row.color:'-'}} <span class="color_block" :style="{backgroundColor: scope.row.color?scope.row.color:''}"></span></div>
                </template>
              </el-table-column>
            </el-table>
            <el-table
              :data="tableData"
              border
              size="mini"
              :header-cell-style="{backgroundColor: '#EEF5FE'}"
              style="width: 100%;margin-top: 4px;">
              <el-table-column prop="initialNum" label="初始号码" align="center"></el-table-column>
              <el-table-column prop="checkNum" label="号源" align="center"></el-table-column>
              <el-table-column prop="reserveNum" label="预留" align="center"></el-table-column>
              <el-table-column prop="addNum" label="追加" align="center"></el-table-column>
              <el-table-column prop="callNum" label="已预约" align="center"></el-table-column>
              <el-table-column prop="appointmentStatus" label="预约状态" align="center">
                <template slot-scope="scope">
                  <span :class="appoStatusClassFlr(scope.row.appointmentStatus)">{{scope.row.appointmentStatus}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="aiw-grid">
          <!-- <div class="aig-title">
            <div class="tit">参数设置</div>
          </div> -->
          <ruleTemplate ref="ruleTemplate" :hospital-code="hospitalCode" :dep="dep"></ruleTemplate>
        </div>

        <div class="aiw-footer">
          <el-button size="small" @click="close">返回</el-button>
          <el-button size="small" type="warning" @click="handleLog" v-if="appoInfo.id">日志</el-button>
          <el-button size="small" type="primary" @click="appoInfoSend">保存修改</el-button>
        </div>
      </div>
    </Dialogdrawerdefect>
    <appoInfoDetail ref="appoInfoDetail"></appoInfoDetail>
    <appoInfoDetailSeat ref="appoInfoDetailSeat"></appoInfoDetailSeat>
    <!-- 时段日志 -->
    <appoPeriodLog
      :hospital-code="hospitalCode"
      :appo-period-log-dlg.sync="appoPeriodLogDlg"
      :id="appoLogId"
      tabel-type="1"></appoPeriodLog>
  </div>
</template>

<script>
import { updateappointmentstatus } from '@/api/api'
import { updateAppListsSend } from '@/api/room'
import { dateFormatter } from '@/utils/validate'
import appoInfoDetail from './appoInfoDetail'
import appoInfoDetailSeat from './appoInfoDetailSeat'
import Dialogdrawerdefect from '@/components/dialogbox/dialogDrawerDefect'
import appoPeriodLog from '@/components/logDialog/appoPeriodLog'
import ruleTemplate from './ruleTemplate'

export default {
  components: {
    Dialogdrawerdefect,
    appoInfoDetail,
    appoInfoDetailSeat,
    ruleTemplate,
    appoPeriodLog
  },
  data() {
    return {
      loading: false,
      appoInfoEditVisible: false,
      statusOptions: ['暂停预约', '节假日', '设备故障', '正常预约'],
      appoInfo: {},
      tableData: [],
      // 检查项目
      checkroom: [],
      hospitalCode: '',
      dep: '',
      // 操作日志
      appoPeriodLogDlg: false,
      appoLogId: null
    }
  },
  methods: {
    init(data) {
      const { appoInfo, room } = data
      this.appoInfo = { ...appoInfo }
      this.appoInfoEditVisible = true
      this.checkroom = [...room]
      this.hospitalCode = room.length > 0 ? room[0] : ''
      this.dep = room.length > 0 ? room[2] : ''
      this.setInfo()
      this.$nextTick(() => {
        this.$refs.ruleTemplate && this.$refs.ruleTemplate.init(this.appoInfo)
      })
    },
    setInfo() {
      console.log('++++++++++++++++setInfo+++++++++++++++++设置checkClass')
      this.tableData = [
        {
          appointmentDate: dateFormatter(this.appoInfo.appointmentDate, false),
          checkClass: this.appoInfo.checkClass,
          beginTime: this.appoInfo.beginTime,
          endTime: this.appoInfo.endTime,
          initialNum: this.appoInfo.initialNum,
          checkNum: this.appoInfo.checkNum,
          addNum: this.appoInfo.addNum,
          reserveNum: this.appoInfo.reserveNum,
          callNum: this.appoInfo.callNum,
          color: this.appoInfo.color,
          appointmentStatus: this.appoInfo.appointmentStatus
        }
      ]
    },

    handleNodeClick(data) {
      console.log(data)
    },
    // 保存修改
    appoInfoSend() {
      if (this.appoInfo.appointmentStatus === '正常预约') {
        this.$message.warning('正常预约时段号源不可修改，请先修改时段号源状态！')
        return false
      }
      this.$confirm(`保存修改, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let ruleParams = await this.$refs.ruleTemplate.getRuleData()
        ruleParams = JSON.parse(ruleParams)
        const _obj = { ...this.appoInfo }
        _obj.appointmentFilters = [...ruleParams.appointmentFilters]
        const putRes = await this.updateSend(_obj)
        if (putRes && putRes.code === 10000) {
          this.$message.success('保存修改成功！')
          this.$emit('updateAppo', _obj)
        }
      }).catch(() => {})

      // this.$emit('appoInfoEditSend', data)
      // this.appoInfoEditVisible = false
    },
    updateSend(paramObj) {
      return new Promise(async resolve => {
        const params = {
          ...paramObj
        }
        const res = await updateAppListsSend(params)
        resolve(res)
      })
    },

    // 修改预约状态
    statusCommand(val) {
      const status = val
      this.$confirm(`修改预约时段状态为【${status}】, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          hospitalCode: this.appoInfo.hospitalCode,
          ids: [this.appoInfo.id],
          appointmentStatus: status
        }
        this.loading = true
        updateappointmentstatus(params).then(res => {
          this.loading = false
          if (res && res.code === 10000) {
            this.$message.success('预约时段状态修改成功！')
            this.appoInfo.appointmentStatus = status
            this.tableData[0].appointmentStatus = status
            this.$emit('updateAppo', JSON.parse(JSON.stringify(this.appoInfo)))
          }
        })
      }).catch(() => {})
    },

    // 关闭弹框
    close() {
      this.appoInfoEditVisible = false
    },
    // 预约详情
    appoDetail() {
      const params = {
        HospitalCode: this.appoInfo.hospitalCode,
        AppointmentListDmbId: this.appoInfo.id
      }
      this.$refs.appoInfoDetail.init(params)
    },
    // 预约占位
    appoDetailSeat() {
      this.$refs.appoInfoDetailSeat.init()
    },
    // 时段日志
    handleLog() {
      this.appoLogId = this.appoInfo.id + ''
      this.appoPeriodLogDlg = true
    },

    // 预约状态，样式class判断
    appoStatusClassFlr(val) {
      switch (val) {
        case '':
          return 'appo-grey'
        case '节假日':
          return 'appo-danger'
        case '暂停预约':
        case '设备故障':
          return 'appo-warn'
        case '正常预约':
          return 'appo-success'
        default:
          return 'appo-default'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$color-primary:#00C0EF;
$appoSuccessColor: #0bd677;
$appoDefaultColor: #00C0EF;
$appoDangerColor: #E37470;
$appoWarnColor: #FF8618;
$appoGreyColor: #919398;
.appoInfo-wrap{
  display: flex;
  flex-direction: column;
  padding-bottom: 54px;
  .aiw-grid{
    flex:1;
    padding: 10px 15px 0;
  }
  .aiw-footer{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    text-align: right;
    padding: 10px 20px;
    border-top: solid 1px #DCDFE6;
    background-color: #fff;
  }
}
.aig-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  .tit{
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }
  .navs{
    display: flex;
    align-items: center;
    color: $color-primary;
    cursor: pointer;
    user-select: none;
    .btn{
      padding-right: 10px;
      margin-right: 10px;
      border-right: solid 1px #e5e5e5;
    }
    .btntxt{
    color: $color-primary;

    }
  }
}
.channel{
  display: flex;
  flex-wrap: nowrap;
  border: solid 1px #e5e5e5;
  .channel-item{
    flex-grow: 1;
    text-align: center;
    line-height: 32px;
    border-right: solid 1px #e5e5e5;
    font-size: 14px;
    color: #666;
    &:last-child{
      border-right: none;
    }
  }
}

.form-grid{
  padding-bottom:10px;
  border-bottom: solid 1px #DBDFE9;
  &:last-child{
    border-bottom: none;
  }
  .fg-tit{
    display: flex;
    line-height: 44px;
    .txt{
      flex: 1;
    }
    .flr-add{
      user-select: none;
      color: $color-primary;
      cursor: pointer;
    }
  }
}
.aiw-main{
  /deep/ .el-table td,/deep/ .el-table th{
    padding: 0px 0;
  }
  .flr-del{
    display: none;
    font-size: 18px;
    line-height: 28px;
    color: #fc4242;
    cursor: pointer;
  }
  /deep/ .el-table__row:hover{
    .flr-del{
      display: block;
    }
  }
}
.appo-grey{
  color: $appoGreyColor;
}
.appo-danger{
  color: $appoDangerColor;
}
.appo-warn{
  color: $appoWarnColor;
}
.appo-success{
  color: $appoSuccessColor;
}
.appo-default{
  color: $appoDefaultColor;
}
.color_block{
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  vertical-align: -2px;
}
</style>
